<!-- 用户头像和用户名模块的入口 -->
<template>
  <div id="user-show">
    <user-login
      v-if="loginPage"
      @loginOut="pegeShow"
      @getUserData="getUserData"
    ></user-login>
    <user-info v-if="infoPage" @loginOut="pegeShow"></user-info>

    <div class="user-info clear-fix" @click="pegeShow">
      <div class="user-photo left">
        <img src="~assets/img/profile/userDefault.jpg" alt="" />
      </div>
      <div class="user-nickname left">
        {{ isLogin ? nickname : "登录/注册" }}
      </div>
    </div>
  </div>
</template>

<script>
import UserLogin from "./UserLogin";
import UserInfo from "./UserInfo";

export default {
  name: "UserShow",
  components: {
    UserLogin,
    UserInfo,
  },
  data() {
    return {
      loginPage: false,
      isLogin: false,
      nickname: "",
      infoPage:false
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    pegeShow() {
      if(!this.isLogin){
        this.loginPage = !this.loginPage;
      }else{
        this.infoPage = !this.infoPage;
      }
    },
    getUserData(str){
      this.loginPage = !this.loginPage
      this.isLogin = !this.isLogin
      this.nickname = str
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
#user-show {
  margin: 20px;
}
.user-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
}
.user-photo img {
  width: 100%;
}
.user-nickname {
  line-height: 70px;
  padding-left: 20px;
  font-weight: 600;
  font-size: 21px;
}
</style>